import * as THREE from 'three'
// 导入轨道控制器可以使得相机围绕目标进行轨道运动
import {OrbitControls }from 'three/examples/jsm/controls/OrbitControls'
/**
 * 创建一个场景
 * 为了真正能够让你的场景借助three.js来进行显示，
 * 我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。
 * 分支init:
 *          实现了几何图渲染
 * 分支v1.0:    
 *          实现轨道控制器让物体转动
 *          实现了辅助器x,y,z轴可以看到让物体位置更好的体现出来
 * 分支v1.1:
 *          控制物体移动
 */
// 创建场景
const scence = new THREE.Scene()
// 创建一个透视相机--(从某个视角观看)
/**
 * fov — 摄像机视锥体垂直视野角度
 * aspect — 摄像机视锥体长宽比
 * near — 摄像机视锥体近端面
 * far — 摄像机视锥体远端面
 */
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 0, 10)//设置该向量的x、y 和 z 分量。
scence.add(camera)//相机加入到场景中
/**
 * 添加物体
 * 示例:创建一个几何体
 * */
const cubeGemoetry = new THREE.BoxGeometry()
/**
 * 设置材质
 *  基础线条材质（LineBasicMaterial）
 *  基础网格材质(MeshBasicMaterial)
 */
const cubeMaterial = new THREE.MeshBasicMaterial({ color:  0xffff00 })
// 根据几何体和材质创建网格（Mesh）物体
const cube = new THREE.Mesh(cubeGemoetry, cubeMaterial)
console.log('cube-->查看物体属性功能', cube);
// 修改物体位置
// cube.position.set(5,0,0)
// cube.position.x=3
// 缩放
// cube.scale.set(3,2,1)
// cube.scale.x=5
// 旋转
/**
 * Math.PI==180度(Math.PI/4==45度角)
 * 参数:XYZ旋转顺序
 * */ 
// cube.rotation.set(Math.PI/4,0,0,'xzy')
// 将几何体添加到场景中
scence.add(cube)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 查看renderer的属性方法
console.log(renderer);
// 将webgl渲染的canvans内容添加到body上
document.body.appendChild(renderer.domElement)
// // 使用渲染器通过相机将场景渲染进来
// renderer.render(scence, camera)

// 创建轨道控制器
/**
 * OrbitControls( object : Camera, domElement : HTMLDOMElement )
 * object: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
 * domElement: 用于事件监听的HTML元素。
 */
const controls = new OrbitControls(camera, renderer.domElement)
/**
 * AxesHelper:坐标轴辅助器
 * 用于简单模拟3个坐标轴的对象.
 * 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
 */
 const axesHelper = new THREE.AxesHelper( 5 );
 scence.add( axesHelper );//添加到场景中
// 使用渲染器通过浏览器每渲染一帧就要调用一次渲染器以此来实现轨道控制器效果
function render (time) {//当时长度等于速度*时间
    console.log(time);
    // 正常情况一秒钟刷新率为60帧,每次一帧间隔为1000毫秒除以60==16毫秒左右
    // 让物体每次渲染都改变位置
    // cube.position.x += 0.01
    // cube.rotation.x+=0.01//x轴每次渲染旋转0.01度
    // if (cube.position.x > 5) {
    //     cube.position.x=0
    // }
    /**
     * 需求:走度为5要求一秒走一厘米,5秒钟走到5,
     * 需要匀速的运动但因为每个计算机的刷新率及任务量各方面都会影响时间差,导致time每次上下帧相隔都不同
     * 思路不使用three中提供的默认参,需手动去算出,让其匀速进行
     * L=v*t(长度=速度*时间)速度要求1秒走一格1*t
     * 
     * */
    let t = time / 1000 %5//得到每秒(%5)每次到了5之后会重新计算,不然不回重新开始
    cube.position.x = t * 1//每次渲染时移动1格
        if (cube.position.x > 5) {
        cube.position.x=0
    }
    
    // 重新渲染
    renderer.render(scence, camera)
    // 当下一帧的时候自调用
    requestAnimationFrame(render)
}
render()
